import { defineComponent, reactive, inject } from 'vue'
import './cardConfig.scss'

import city from '@/assets/js/city.js'
import plusIcon from '../../detail/components/FormConfigComponents/icon/plus-icon.svg'
import { uploadFile2 } from '@/api/common'

export default defineComponent({
  name: 'PreviewForm',
  props: {
    controlCardColumns: {
      type: Array,
      default: () => []
    },
    formData: {
      type: Object,
      default: () => ({})
    },
    readOnly: Boolean,
    coverImage: String
  },

  setup(this, props, ctx) {
    const formDataModel: any = inject('formDataModel')
    // 上传文件
    const doUpload = async (file: any) => {
      const params = {
        file: file.file,
        fileName: file.file.name
      }
      const res: any = await uploadFile2(params)
      return res
    }
    /* 渲染控件列表 */
    const renderCarouselByRules = (El: any, v: any) => {
      const rules = v.rules_list
      if (rules?.length) {
        for (const iterator of rules) {
          for (const valList of iterator.related_value) {
            if (formDataModel.value[iterator.related_key]?.includes(valList)) {
              return El
            }
          }
        }
      } else {
        return El
      }
    }
    const renderEmpty = () => {
      return <div class="preview-card-empty">请点击左侧按钮添加控件～</div>
    }
    const renderShowContentList = (columns: any) => {
      return (
        // 收集表表单
        <div class="preview-card-list">
          {columns.map((v: any, i: number) => {
            return renderCarouselByRules(
              <div class="preview-card-item" key={v.id}>
                <div class="preview-card-item__title">
                  <div>
                    <span class="preview-card-item__title__index">
                      <span class="is-require">{v.is_require ? '*' : ''}</span>
                      {`${i + 1}`.padStart(2, '0')}
                    </span>
                    {v.form_title}
                  </div>
                </div>
                <div class="preview-card-item__desc">
                  <div>{v.form_desc} </div>
                </div>
                <div class="preview-card-item__input">{renderControlInput(v)}</div>
              </div>,
              v
            )
          })}
        </div>
      )
    }

    // 上传图片控件url
    const doUploadCarousel = async (file: any, v: any) => {
      const res = await doUpload(file)
      formDataModel.value[v.key].splice(0, formDataModel.value[v.key].length, res)
    }
    // 渲染控件卡片
    const renderControlInput = (v: any) => {
      /** 这里是参数的约定，以防止dom混乱看起来有点复杂
       * v @param 这个是当前选项卡的对象
       * item @param 如果当前选项卡是多选，或者下拉，item是属于options_list里的每一项
       * picUrl @param 如果当前选项卡是图片，picUrl是属于picture_url里的每一项
       */

      switch (v.type) {
        case 'textbox':
        case 'mobile':
        case 'email':
        case 'pca':
        case 'select':
          return <el-input modelValue={formDataModel.value[v.key]} placeholder={v.form_placeholder} readonly={props.readOnly}></el-input>
        case 'radio':
          return (
            <>
              <el-radio-group modelValue={formDataModel.value[v.key]} readonly={props.readOnly}>
                {v.options_list?.map?.((item: any, op_index: number) => {
                  return (
                    <el-radio key={item.value} label={item.value}>
                      {item.value}
                    </el-radio>
                  )
                })}
              </el-radio-group>
            </>
          )
        case 'muti_select':
          return (
            <>
              <el-checkbox-group modelValue={formDataModel.value[v.key]} readonly={props.readOnly}>
                {v.options_list?.map?.((item: any, op_index: number) => {
                  return <el-checkbox key={item.value} label={item.value} value={item.value} />
                })}
              </el-checkbox-group>
            </>
          )
        case 'textarea':
          return <el-input v-model={formDataModel.value[v.key]} type="textarea" rows={5} placeholder={v.form_placeholder} readonly={props.readOnly}></el-input>
        case 'date':
          return <el-date-picker modelValue={formDataModel.value[v.key]} type="date" placeholder={v.form_placeholder} readonly={props.readOnly} />
        case 'picture':
          return (
            <>
              <img class='card-pictrue' src={formDataModel.value[v.key]} />
            </>
          )
        case 'carousel':
          return (
            <>
              {v.picture_url.length === 1 ? (
                <img class="preview-card-item__carousel_img" src={v.picture_url[0]} alt="" />
              ) : (
                <el-carousel interval={2000} height="164px" arrow="never">
                  {v.picture_url?.map((picUrl: any) => {
                    return (
                      <el-carousel-item>
                        <img class="preview-card-item__carousel_img" src={picUrl} alt="" />
                      </el-carousel-item>
                    )
                  })}
                </el-carousel>
              )}
            </>
          )
        case 'rate':
          return (
            <>
              <el-rate modelValue={formDataModel.value[v.key]} colors={new Array(3).fill('#FF6B00')} class="preview-card-item__rate" readonly={props.readOnly} />
            </>
          )

        default:
          return <div>没有找到该控件呢～</div>
      }
    }

    const setState: any = inject('setState')
    console.log(props.coverImage)

    return () => (
      <article class="preview-card-form">
        <img src={props.coverImage} />
        {renderShowContentList(props.controlCardColumns)}
      </article>
    )
  }
})
